<template>
  <Layout>
    <div class="trains-detail">
      <Banner />
      <Loading :isLoading="isLoading"/>
      <div class="content">
        <h4>{{trainsData.title}}</h4>
        <div class="create_time">{{toDate(trainsData.create_at)}}</div>
        <p>{{trainsData.intro}}</p>
        <img :src="trainsData.image_main" alt="">
        <div v-html="trainsData.content" class="train-content"></div>
      </div>
    </div>
  </Layout>
</template>

<script>
import {ref, onMounted} from 'vue'
import {getTrainInfo} from "../api/support"
import Layout from '/@/components/layout/Layout.vue'
import Banner from '../components/Banner.vue'
import Loading from '../components/Loading.vue'
import {useRoute} from "vue-router";
export default {
  name: "TrainDetail",
  components:{Layout,Banner,Loading},
  setup(){
    const route = useRoute();
    const trainsData = ref({})
    let isLoading = ref(true);
    onMounted(()=>{
      getTrainInfo(route.query.id * 1).then((res)=>{
        if(res && res.code === 200){
          trainsData.value = res.data
          isLoading.value = false
        }
      })
    })

    const toDate = (str) => {
      const newDate = new Date(str * 1000).toString()
      const a = newDate.split(' ')
      return a[1]+" "+a[2]+","+a[3]
    }
    return {
      trainsData,
      isLoading,
      toDate
    }
  }
}
</script>

<style scoped lang="scss">
.trains-detail{
  .content{
    margin:0 auto;
    width:70vw;
    text-align: center;
    h4{
      font-size:40px;
      color:black;
      font-weight: bold;
      margin:25px 0 10px 0;
    }
    .train-content{
      margin:20px 0 20px 0;
      text-align: left;
    }
  }
}
</style>

